<template>
<view class="fixedArea">
	<view class="fixedBtn flex-rcc search" @tap="calcMoney" v-if="bill.list.length>0">计算</view>
	<view class="fixedBtn flex-rcc add" @tap="show = true">
		<u-icon name="search" color="#fff" size="56rpx"></u-icon>
	</view>
	<view class="fixedBtn flex-rcc add" @tap="goTo(`/pagesub/bill/add?currentMonth=${currentMonth}`)">
		<u-icon name="plus" color="#fff" size="56rpx"></u-icon>
	</view>
</view>

<!-- <u-cell-group>
	<u-swipe-action v-for="(item, i) in bill.list" :key="i">
		<u-swipe-action-item :options="options2">
			<view class="swipe-action u-border-top u-border-bottom">
				<view class="swipe-action__content">
					<u-cell title="U型卡子" value="300"></u-cell>
				</view>
			</view>
		</u-swipe-action-item>
	</u-swipe-action>
</u-cell-group> -->

<u-collapse>
    <u-collapse-item
		v-for="item in bill.list"
		:title="item.name"
		:value="item.buyPrice"
		:label="dayjs(item.timestamp).format('YYYY年MM月DD日 HH:mm:ss')"
    >
		<u-cell title="备注" :value="item.remark"></u-cell>
		<view class="btnGroup">
			<up-button
				plain 
				class="btn" 
				type="warning" 
				icon="edit-pen" 
				text="编辑" 
				@click="editBill(item)"
			></up-button>
			<up-button 
				class="btn" 
				type="error" 
				icon="trash" 
				text="删除" 
				@click="deleteBill(item.timestamp)"
			></up-button>
		</view>
    </u-collapse-item>
</u-collapse>
<u-empty 
	v-if="bill.list.length===0" 
	text="暂无数据"
	mode="order" 
	icon="http://cdn.uviewui.com/uview/empty/order.png"
	marginTop="200rpx"
></u-empty>
<!-- 日期选择器 -->
<u-datetime-picker
	:show="show"
	v-model="timestamp"
	mode="year-month"
	:maxDate="nowtmp"
	@confirm="confirmHandle"
	@cancel="show = false"
></u-datetime-picker>
</template>

<script setup>
import { onShow, onLoad } from '@dcloudio/uni-app'
import { useBillStore } from '@/stores'
import { goTo } from '@/utils/helper'
import dayjs from 'dayjs'
import { sumBy } from 'lodash-es'

const bill = useBillStore()
const nowtmp = Date.now();
const show = ref(false);
const timestamp = ref(nowtmp);
const currentMonth = ref('')
const showAddBtn = computed(()=>currentMonth.value===dayjs().format('YYYY-MM'))

function calcMoney(){
	const cost = sumBy(bill.list, (item)=>Number(item.buyPrice)).toFixed(2)
	uni.showModal({
		title: `${currentMonth.value}您的账单计算结果`,
		content: `总共报账${bill.list.length}次, 总金额为${Number(cost)}元`,
		showCancel: false,
	})
}

function confirmHandle(e){
	const nowMonth = dayjs(e.value).format('YYYY-MM')
	show.value = false
	currentMonth.value = nowMonth
	uni.setNavigationBarTitle({title: `${currentMonth.value}账目列表`})
	bill.getList(currentMonth.value);
}

function editBill(item){
	goTo('/pagesub/bill/add?order='+JSON.stringify(item))
}

function deleteBill(timestamp){
	uni.showModal({
		title: '温馨提示',
		content: `请确认是否要删除当前选中的账目？`,
		success(res){
			if (res.confirm) {
				bill.deleteItem(timestamp)
			}
		}
	})
}
onLoad(()=>{
	currentMonth.value = dayjs().format('YYYY-MM')
	uni.setNavigationBarTitle({title: `${currentMonth.value}账目列表`})
	bill.getList()
})
</script>

<style lang="scss" scoped>
.fixedArea{
	position: fixed;
	bottom: 50rpx;
	right: 20rpx;
	z-index: 2;
	.fixedBtn{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		box-shadow: 0 0 10rpx #ccc;
		color: #fff;
		margin-top: 20rpx;
	}
	.add{
		background-color: #2979ff;
	}
	.search{
		background-color: #666666;
	}
}
.btnGroup{
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding-top: 20rpx;
	.btn{
		width: 200rpx!important;
	}
}
</style>